<template>
	<view style="padding: 0 15rpx;">
		<uni-swipe-action>
			<uni-swipe-action-item
			 v-for="(item,index) in list" :key="index">
				<view class="flex py-2 px-1 align-center border-bottom" @tap="open(item.id)">
					<image :src="item.cover+'/small'" mode="aspectFill" class="rounded-lg mx-2 flex-shrink"
						style="width: 250rpx; height: 160rpx;"></image>
					<view class="flex-1">
						<view class="text-ellipsis-2 font mb-1 pr-1">{{item.title}}</view>
						<view class="font-sm text-light-muted mb-1">{{$Time.gettime(item.created_time)}}</view>
						<view class="flex text-light-muted mb-1 justify-between align-center">
							<view class="flex align-center">
								<text class="iconfont iconbofangshu font-md mr-1"></text>
								<text class="font-sm">{{$Time.getCounts(item.play_count)}}</text>
								<text class="iconfont icondanmushu font-md mx-1"></text>
								<text class="font-sm">{{$Time.getCounts(item.danmu_count)}}</text>
							</view>
							<text class="ml-1 text-danger font-weight-bold font-sm">{{item.status===1?'':(item.status===0?'待审核':'已禁用')}}</text>
							<text class="iconfont icongengduo"></text>
						</view>
					</view>
				</view>
				<template v-slot:right>
					<view class="flex align-center justify-center" style="width: 180rpx; background-color: #DD524D;"
					@click="clear($event,item.id)">
						<text class="text-white font-sm">删除浏览记录</text>
					</view>
				</template>
			</uni-swipe-action-item>
		</uni-swipe-action>
	</view>
</template>

<script>
	// 引入vuex的 mapState
	import { mapState } from 'vuex';
	export default {
		data() {
			return {
				list:[]
			}
		},
		computed:{
			...mapState({
				// 当前登录用户，注意要与此页面的user(此作品所属用户)进行区分
				cuser: state => state.user
			})
		},
		onShow() {
			this.getData(false);
		},
		methods: {
			open(id){
				uni.navigateTo({
					url:'../video-detail/video-detail?id='+id
				})
			},
			// 删除浏览记录
			clear(e,video_id){
				uni.showModal({
					title:'确定删除吗？',
					success: (r) => {
						if(r.confirm){
							let alist = uni.getStorageSync('history');
							alist = alist ? JSON.parse(alist) : [];
							let index = alist.findIndex(item=>{
								return item.id === video_id
							})
							if(index > -1){
								alist.splice(index,1);
								uni.setStorage({
									key:'history',
									data: JSON.stringify(alist),
									success: (res) => {
										alist.forEach(item=>{
											item.cover = this.$H.common.sourceUrl + item.cover; 
										})
										this.list = alist;
										uni.showToast({
											title:'删除成功',
											icon:'none'
										})
									}
								});
							} else {
								uni.showToast({
									title:'该记录不存在',
									icon:'none'
								})
							}
						}
					}
				})
			},
			//获取专注列表
			getData(showToast=true){
				let alist = uni.getStorageSync('history');
				alist = alist ? JSON.parse(alist) : [];
				alist.forEach(item=>{
					item.cover = this.$H.common.sourceUrl + item.cover; 
				})
				const res = alist.filter(item => item.status === 1 || item.user_id === this.cuser.id);
				this.list = res;
			}
		}
	}
</script>

<style>

</style>
